<template>
  <view class="t-login">

    <view class="t-b">欢迎</view>

    <form class="cl" @submit.prevent="handleLogin">
      <view class="t-a">
        <image src="../../static/122.png"></image>
        <input v-model="phone" id="phone" type="text" placeholder="请输入手机号" maxlength="11" style="opacity: 0.5"/>
      </view>

      <view class="t-a">
        <image src="../../static/123.png"></image>
        <input
           v-model="password"
           id="password"
           :type="showPassword ? 'text' : 'password'"
           placeholder="请输入密码"
         />
         <view class="t-c">
            <img :src="showPassword ? '../../static/open.png' : '../../static/close.png' " @click="togglePassword" style="width:25px;height:auto; opacity: 0.7"/>
         </view>
      </view>
      <button :disabled="!isChecked" @click="handleLogin">立即登录</button>
      <p class="centered-text">请先同意协议</p>
    </form>

    <view class="t-f">
		<checkbox-group @change="change" >
			<label>
			<checkbox  :value="isChecked" color="#8DCB6D" style="transform:scale(0.7)"/>
			登录即同意<text @click="toXieyi">用户协议</text>
			</label>
		</checkbox-group>
	</view>
    <view class="t-e cl">
      <view class="t-g">
        <image src="../../static/weixin.png" class="img1"></image>
        <view>微信</view>
      </view>
      <view class="t-g">
        <image src="../../static/weibo.png" class="img1"></image>
        <view>微博</view>
      </view>
    </view>

  </view>
</template>

<script setup>
	import { ref } from 'vue';
  import data from '../../data/y_data.json'


  let record = data.record
  let phone = ref('')
  let password = ref('')

  const showPassword = ref(false);
  const togglePassword = () => {
    showPassword.value = !showPassword.value;
  };

  console.info(record[0].personal1.phone)
  console.info(record[0].personal1.password)
  console.info(record[1].team1.phone)
  console.info(record[1].team1.password)
  let check = function (){
    if(phone.value=='' || password.value== ''){
      uni.showModal({
        content:'手机号或密码不能为空',
        showCancel:false
      })
    }else{
      if((phone.value==record[0].personal1.phone && password.value==record[0].personal1.password) ||( phone.value==record[1].team1.phone && password.value==record[1].team1.password) ){
        uni.switchTab({
          url: 'record'
        })
      }else if((phone.value==record[0].personal1.phone && password.value!=record[0].personal1.password) || (phone.value==record[1].team1.phone && password.value!=record[1].team1.password)){
        uni.showModal({
          content:'密码输入错误，请重新输入',
          showCancel:false
        })
      }else if (phone.value!=record[0].personal1.phone && phone.value!=record[1].team1.phone){
        uni.showModal({
          content:'手机号未注册',
          showCancel:false
        })
      }
    }
  }

	let toXieyi = function (){
		uni.navigateTo({
		url:'xieyi'
		})
	}
	
	let isChecked = ref(false);
	 
	let change = (e)=>{
        isChecked.value = e.detail.value.length > 0;
	 }

   let handleLogin = () => {
     // 将输入的数据保存到 sessionStorage
     sessionStorage.setItem('phone', phone.value);
     sessionStorage.setItem('password', password.value);

     check();
   }
</script>

<style>
.input1{
 opacity: 0.8;
 background-img: url("${showPassword ? '../../static/open.png' : '../../static/close.png'}") no-repeat right center;
 background-size:24px 24px;
 padding-right:12px;
}
.t-login {
  background-image: url("../../static/121.png");
  min-height: 100vh;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000
}

.t-login button {
  font-size: 28rpx;
  background: #8DCB6D;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx
}

#phone{
  background: #FFFFFF;
  opacity:0.8;
}
#code{
  background: #FFFFFF;
  opacity:0.8;
}
.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 50rpx;
  background: #FFFFFF;
  font-size: 28rpx;
  border-radius: 50rpx;
  opacity: 0.5;
}

.t-login .t-a {
  position: relative;
}

.t-login .t-a image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 40rpx;
  top: 28rpx;
  border-right: 2rpx solid  #dedede;
  padding-right: 20rpx
}

.t-login .t-b {
  text-align: center;
  font-size: 46rpx;
  color: #000;
  padding: 150rpx 0
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background:#ffffff;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
  opacity:0.7;
}

.t-login .t-d {
  text-align: center;
  color: #555555;
  margin: 80rpx 0
}

.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}

.t-login .t-g {
  float: left;
  width: 50%
}

.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

.t-login .t-f {
  text-align: center;
  margin: 80rpx 0 0 0;
  color: #666
}

.t-login .t-f text {
  margin-left: 8rpx;
  color: #999
}

.t-login .uni-input-placeholder {
  color: #000
}

.cl {
  zoom: 1
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20'
}
.t-g .img1{
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

.centered-text {
    text-align: center;
    font-size: 12px;
    color: red;
}
</style>

